<template>
  <div>
    <mt-navbar fixed v-model="tabSelected">
      <mt-tab-item :id="index" v-for="(item,index) in dataTabs" :key="item">{{item|channel}}</mt-tab-item>
    </mt-navbar>
    <mt-popup v-model="popupVisible" position="bottom">
      <div><span class="close rounded black" @click="popupVisible=false"></span></div>
      <div class="infoHeader">
        <h3 class="title">
          <mt-badge size="small" type="warning" class="category">{{InfoObj.category}}</mt-badge>{{InfoObj.title}}
        </h3>
        <p class="source">
          <small>{{InfoObj.source}}</small>
          <small>{{InfoObj.ptime?InfoObj.ptime.slice(5,16):''}}</small>
        </p>
      </div>
      <p v-if="InfoObj.picInfo[0]!=undefined"> <img :src="InfoObj.picInfo[0].url" class="card-img"></p>
      <p>{{InfoObj.digest}}</p>
    </mt-popup>
    <mt-tab-container v-model="tabSelected" class="tab-container">
      <mt-tab-container-item :id="index" v-for="(item,index) in dataList">
        <div class="mint-cell" v-for="details,dindex in item" :key="details.docid" @click="showInfo(details)">
          <div class="row">
            <div class="col-xs-8">
              <!-- <mt-badge size="small" type="warning">{{details.category}}</mt-badge> -->
              <span class="title">{{details.title}}</span>
            </div>
            <div class="col-xs-4">
              <img :src="details.picInfo[0]!=undefined?details.picInfo[0].url:''" class="card-img">
            </div>
          </div>
          <div class="row">
            <div class="col-xs-4">
              <time class="small">{{details.ptime?details.ptime.slice(5,10):''}}</time>
            </div>
            <div class="col-xs-8 text-right">
              <span class="small">{{details.source}}</span>
            </div>
          </div>
        </div>
      </mt-tab-container-item>
    </mt-tab-container>

  </div>
</template>

<script>
  import {
    Indicator
  } from 'mint-ui';

  export default {
    name: "",
    data() {
      return {
        popupVisible: false,
        InfoObj: {},
        tabSelected: 0,
        dataTabs: [],
        dataList: []
      }
    },
    methods: {
      loadNewList() {
        Indicator.open({
          spinnerType: 'double-bounce'
        });
        this.$http.get('https://www.apiopen.top/journalismApi').then((response) => {
          Object.keys(response.data.data).forEach((key) => {
            this.dataTabs.push(key)
            this.dataList.push(response.data.data[key])
            Indicator.close();
          });
          console.log(this.dataList)
        }).catch((err) => {
          console.log(err)
          Indicator.close();
        })
      },
      showInfo(obj) {
        this.popupVisible = true
        this.InfoObj = obj
        console.log(obj)
      }
    },
    mounted() {
      this.loadNewList()
    },
    filters: {
      channel(msg) {
        switch (msg) {
          case "tech":
            return '科技'
            break;
          case "auto":
            return '热搜'
            break;
          case "money":
            return '财经'
            break;
          case "sports":
            return '体育'
            break;
          case "war":
            return '军事'
            break;
          case "dy":
            return '社会'
            break;
          case "ent":
            return '娱乐'
            break;
          case "toutiao":
            return '头条'
            break;
        }
      }
    },
  }
</script>

<style lang="less" scoped>
  @import '../../assets/css/style.less';

  .infoHeader {
    border-bottom: 1px solid #eaeaea;
    padding-bottom: 5px;
    margin-bottom: 10px;
  }

  .card-img {
    width: 100%;
  }

  .mint-badge {
    vertical-align: text-top;
    color: #555;
    margin-right: 5px;
    background-image: linear-gradient(135deg, #FDEB71 10%, #F8D800 100%);
  }

  .mint-cell {
    padding: 10px 10px;
    border-bottom: 1px solid #eaeaea;

    .small {
      display: block;
      color: @Info_color;
      font-size: 12px;
      margin-top: 5px;
    }
  }

  .tab-container {
    margin: 49px 0 52px
  }

  .mint-navbar {
    &.is-fixed {
      margin: @Top_Height 0 0;
    }

    box-shadow: 0 6px 10px rgba(0, 0, 0, .04);
  }

  .app-container {
    margin: 80px 0 0;
  }

  
</style>
